<template>
    <div style="height: 50px;">
        <el-button round @click="AddPickProduct()">保存</el-button>
    </div>

    <div>
        <h1 style="text-align: center; font-size: 30px;color:black">生产领料</h1>
    </div>
    <!-- 添加 -->
    <table border="1"
        style="border-collapse: collapse; width: 100%; height: 30px;margin-top: 30px;margin-bottom: 30px;color:black">
        <tr>
            <td :colspan="8" style="height: 50px; font-size: 20px;">基本信息</td>
        </tr>
        <tr style="height: 70px;">
            <td>
                <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm"
                    size="small" style="margin-top: 10px;">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="单据主题" prop="inspectionTheme">
                                <el-input v-model="form.picTopic" style="width:200px ;" size="large" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="单据编号" prop="inspectionNumber">
                                <el-input v-model="form.picNumber" placeholder="保存后自动生成" style="width:250px ;"
                                    size="large" />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="领料日期" prop="purchaseContract">
                                <el-date-picker v-model="form.picCollarDate" type="date" placeholder="选择日期"
                                    format="YYYY/MM/DD" value-format="YYYY-MM-DD" size="large" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="领料数量" prop="supplierName">
                                <el-input v-model="form.picNumTotal" style="width:200px ;" size="large" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="来源单据类型" prop="inspectionTheme">
                                <el-select v-model="form.pickNum"
                                    style="height: 50px; width: 250px; text-align: center;" size="large">
                                    <el-option label="无来源" value="">无来源</el-option>
                                    <el-option label="生产派工" :value="1">生产派工</el-option>
                                    <el-option label="委外返工" :value="2">委外返工</el-option>
                                    <el-option label="生产返工" :value="3">生产返工</el-option>
                                    <el-option label="整单委外" :value="4">整单委外</el-option>
                                    <el-option label="工序委外" :value="5">工序委外</el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="制单人" prop="inspectionNumber">
                                <el-input style="width:200px ;" size="large" disabled="true" v-model="form.markName" />
                            </el-form-item>
                        </el-col>

                    </el-row>
                </el-form>
            </td>
        </tr>
    </table>


    <div style="height: 50px;">
        <el-button round @click="addhang()">新增行</el-button>
    </div>

    <!-- 产品表格 -->
    <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;color:black">
        <thead>
            <tr>
                <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" style="width: 30px;" /></th>
                <th style="height: 40px;">序号</th>
                <th>产品名称</th>
                <th>产品编号</th>
                <th>规格</th>
                <th>领料数量</th>
                <th>出库库管</th>
                <th>交货日期</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in check" :key="index">
                <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" @click="huoqu" /></td>
                <td style=" text-align: center;">{{ index + 1 }}</td>
                <td><input v-model="item.pName" type="text" style="height: 40px; width: 100%;text-align: center;"
                        @dblclick="ProClick" />
                </td>
                <td><input v-model="item.pNumber" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" /></td>
                <td><input v-model="item.pSpec" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" />
                </td>
                <td><input v-model="item.pickProductNum" type="text"
                        style="height: 40px;width: 100%;text-align: center;" @change="sumRPNum" />
                </td>
                <td><input v-model="form.outManager" type="text" style="height: 40px;width: 100%;text-align: center;"
                        @dblclick="dialogVisible1 = true" />
                </td>
                <td><el-date-picker v-model="item.pickProductDelDate" type="date" format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD" />
                </td>
            </tr>
        </tbody>
    </table>


    <!-- 产品名称弹框 -->
    <el-dialog v-model="dialogVisible" title="产品名称选择" width="1000" style="height: 700px;">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps"
                        default-expand-all="true" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="productlist" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="pName" label="产品名称" align="center" />
                        <el-table-column prop="pNumber" label="产品编号" align="center" />
                        <el-table-column prop="pUnit" label="规格型号" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible = false">
                保存
            </el-button>
        </template>
    </el-dialog>

    <!-- 库管弹框 -->
    <el-dialog v-model="dialogVisible1" title="库管选择" width="1000" style="height: 700px;color:black"
        :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps" default-expand-all="true"
                        @node-click="handleNodeClick2" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="manpowerList" style="width:100%" @selection-change="handleSelectionChange2">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="mName" label="姓名" align="center" />
                        <el-table-column prop="sectorName" label="部门" align="center" />
                        <el-table-column prop="postName" label="岗位" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible1 = false">
                保存
            </el-button>
        </template>
    </el-dialog>

</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import http from '../../../http.js'


const form = reactive({
    markName: localStorage.getItem('UserName'),
    "pickingId": 0,
    "picTopic": "",
    "picNumber": "",
    "picNumTotal": 0,
    "picCollarDate": "",
    "pickNum": "",
    "pickProdto": [
        {
            pickProductId: '',
            "productId": 0,
            "pickProductNum": 0,
            "manpowerId": 0,
            "pickProductDelDate": "",
            "outManager": "",
            "outshipState": 0,
        }
    ],

})

const dialogVisible = ref(false)
const dialogVisible1 = ref(false)

//点击新增行
const check = ref([])
const addhang = () => {
    check.value.push({

    });
}


//#region  产品名称弹框


const ProClick = () => {
    dialogVisible.value = true
    form.picNumTotal = "";
}
//显示供应商中的供应商类别树形
var VendorType = ref([]);
const getVendorType = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelect').then(res => {
        if (res.data.code == 0) {
            VendorType.value = res.data.data
        }
        console.log(VendorType.value)
    })
}

const productPage = reactive({
    pindex: 1,
    psize: 100,
    pageLast: 0,
    sumCount: 0,
    PName: "",
    PNumber: "",
})
//显示产品列表
const productlist = ref([])
const ProductList = () => {
    axios.get(http.zblnb + '/cg/api/ProcurementReturn/GetProductList', {
        params: {
            pindex: productPage.pindex,
            psize: productPage.psize,
            PName: productPage.PName || "",
            PNumber: productPage.PNumber || "",
            ProductTypeId: 0
        }
    })
        .then(res => {
            productlist.value = res.data.data.list
            productPage.sumCount = res.data.data.sumCount;
            productPage.pageLast = res.data.data.pageLast
            console.log(res.data)
        })
}

//选中的产品名称
const handleSelectionChange = (val: any) => {
    check.value = val
    console.log(check.value)
}

//#endregion


//#region  库管  

//查询条件
const wform = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})

//分页
const wPage = reactive({
    Pindex: 1,
    Psize: 10,
    pcount: 0,
    lcount: 0
})

//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
            console.log(sectorlist.value)
        })
}

//树形
const handleNodeClick2 = (data: Tree) => {
    console.log(data)
    wform.SectorId = data.value
    GetManpowerList();
}

//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: wPage.Pindex,
            Psize: wPage.Psize,
            MName: wform.MName || "",
            Mstart: wform.Mstart || "",
            Mend: wform.Mend || "",
            Bstart: wform.Bstart || "",
            Bend: wform.Bend || "",
            SectorId: wform.SectorId || "",
            PostId: wform.PostId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
            wPage.lcount = res.data.data.lcount;
            wPage.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}


//多选框
const check2 = ref([])
const handleSelectionChange2 = (val: User[]) => {
    check2.value = val
    form.outManager = check2.value[0].mName
    form.manpowerId = check2.value[0].manpowerId

    console.log(form.outManager)
    console.log(form.manpowerId)
}


//#endregion




//输入数量change事件
const sumRPNum = (sum: number) => {
    form.picNumTotal = Number(form.picNumTotal);
    console.log(sum)
    form.picNumTotal += Number(sum.srcElement.__vnode.dirs[0].value);
    console.log(form.picNumTotal)
}

//点击复选框获取选中的值
const selectedRows = ref([])
const ids = ref([])
const huoqu = () => {
    if (ids.value) {
        selectedRows.value = check.value.filter(item => item.productId);
    }
    console.log(selectedRows.value)
}

const Detail = () => {
    axios.get(http.zblnb + "/sc/api/Pick/BackFillPick", {
        params: {
            pickid: route.query.id
        }
    }).then(res => {
        console.log(res.data)
        form.pickingId = res.data.data.pickingId
        form.picTopic = res.data.data.picTopic
        form.picNumTotal = res.data.data.picNumTotal
        form.picCollarDate = res.data.data.picCollarDate
        form.pickNum = res.data.data.pickNum
        form.picNumber = res.data.data.picNumber
        check.value = res.data.data.pickProdto
        check.value.forEach(item => {
            console.log(item)
            form.outManager = item.outManager
            form.manpowerId = item.manpowerId
            form.pickProductId = item.pickProductId
        })

    }).catch(err => {

    })
}



const AddPickProduct = () => {
    var model = {
        pickingId: form.pickingId,
        "picTopic": form.picTopic,
        "picNumTotal": form.picNumTotal,
        "picCollarDate": form.picCollarDate,
        picNumber: form.picNumber,
        pickNum: form.pickNum,
        "pickProdto": selectedRows.value.map(item => ({
            pickProductId: form.pickProductId,
            productId: item.productId,
            "pickProductNum": item.pickProductNum,
            "manpowerId": form.manpowerId,
            "pickProductDelDate": item.pickProductDelDate,
            "outManager": form.outManager,
            "outshipState": 0,
        }))
    }
    console.log(model)
    axios.post(http.zblnb + "/sc/api/Pick/UptPicking", model).then(res => {
        if (res.data.code == 200) {
            ElMessage.success('修改成功');
            router.push('/PickingList');
        }
        else {
            ElMessage.error('修改失败');
        }

    })
}


onMounted(() => {

    GetSectorList();
    ProductList();
    getVendorType();
    GetManpowerList();
    Detail()
})

</script>

<style scoped></style>